<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<%@include file="/comm/pub.inc"%>
		<script type="text/javascript" src="<%=contextPath %>/web/system/pub.js" ></script>
		<script type="text/javascript">
			function addRole(type){
				var listbox1 = mini.get(type?'editRoleList1':'addRoleList1');
				var listbox2 = mini.get(type?'editRoleList2':'addRoleList2');
				var items = listbox1.getSelecteds();
				debug(items);
				listbox1.removeItems(items);
            	listbox2.addItems(items);
			}
			function addAllRole(type){
				var listbox1 = mini.get(type?'editRoleList1':'addRoleList1');
				var listbox2 = mini.get(type?'editRoleList2':'addRoleList2');
				var items = listbox1.getData();
	            listbox1.removeItems(items);
	            listbox2.addItems(items);
			}
			function removeAllRole(type){
				var listbox1 = mini.get(type?'editRoleList1':'addRoleList1');
				var listbox2 = mini.get(type?'editRoleList2':'addRoleList2');
				var items = listbox2.getData();
	            listbox2.removeItems(items);
	            listbox1.addItems(items);
			}
			function removeRole(type){
				var listbox1 = mini.get(type?'editRoleList1':'addRoleList1');
				var listbox2 = mini.get(type?'editRoleList2':'addRoleList2');
				var items = listbox2.getSelecteds();
	            listbox2.removeItems(items);
	            listbox1.addItems(items);
			}
			/**
			* 保存修改数据
			*/
			function saveEditData(validate){
				if (validate && $.isFunction(validate)){
					if (!validate())
						return;		
				}
				var url = $('#editForm').attr('action');
				var form = new mini.Form('#editForm'),
					formData = form.getData();
				//将选择的角色放到提交数据里面
				var listbox2 = mini.get('editRoleList2');
				var roles = [];
				$.each(listbox2.getData(),function(){
					roles.push(this.id);
				});
				formData.roles = roles;
				submitData(url,{jsonData:mini.encode(formData)},function(){
					refrashGrid();
					closeEditWin();
				});
			}
			
			/**
			* 保存添加数据
			*/
			function saveAddData(validate){
				if (validate && $.isFunction(validate)){
					if (!validate())
						return;		
				}
				var url = $('#addForm').attr('action');
				var form = new mini.Form('#addForm'),
					formData = form.getData();
				//将选择的角色放到提交数据里面
				var listbox2 = mini.get('addRoleList2');
				var roles = [];
				$.each(listbox2.getData(),function(){
					roles.push(this.id);
				});
				formData.roles = roles;
				submitData(url,{jsonData:mini.encode(formData)},function(){
					refrashGrid();
					closeAddWin();
				});
			}
			
			function setEditData(data){
				$.getJSON(contextPath+"/action/system/user/getUserRole?id="+data.id,function(json){
					var listbox1 = mini.get('editRoleList1');
					var listbox2 = mini.get('editRoleList2');
					$.each(json,function(){
						listbox1.removeItems(listbox1.findItems(this.id));
					});
					listbox2.loadData(json);
				});
			}
			
		</script>
	</head>
	<body>
		<div id="queryForm" >
			<div style="width:900px;" >
				<table class="input-table" style="margin-left:0;" >
					<tr>
						<td >登录名：</td>
						<td><input style="width:200px;" type="text" class="mini-textbox" name="loginName"/>
						</td>
						<td width=100 >用户名称：</td>
						<td>
							<input style="width:200px;" type="text" class="mini-textbox" name="userName"/>
						</td>
						<td>状态：</td>
						<td>
							<input name="status" class="mini-combobox" style="width:100%;" textField="name" valueField="id" data='[{id:"1",name:"是"},{id:"0",name:"否"}]' />
						</td>
						<td><a class="mini-button" iconCls="icon-search" onclick="search()" >查询</a></td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
		<div style="width:100%;">
		        <div class="mini-toolbar" style="border-bottom:0;padding:0px;">
		            <table style="width:100%;">
		                <tr>
		                    <td style="width:100%;">
		                        <a class="mini-button" iconCls="icon-add" onclick="toAddWin({status:1})" plain="true">新增</a>
		                        <a class="mini-button" iconCls="icon-edit" onclick="toEditWin(setEditData)" plain="true">编辑</a>
		                        <a class="mini-button" iconCls="icon-edit"
		                         onclick="deleteData('<%=contextPath %>/action/system/user/delete')" plain="true">删除</a>
		                    </td>
		                    
		                </tr>
		            </table>           
		        </div>
		    </div>
			<div id="dataGrid" url="<%=contextPath %>/action/system/user/page" class="mini-datagrid" style="width:100%;height:400px;"
				multiSelect="false" sizeList="[20,40,80]" pageSize="20" >
			<div property="columns">
					<div type="checkcolumn" ></div>
						<div type="indexcolumn" headAlign=center >序号</div> 
						<div field="id" width="120" visible=false >id</div>   
						<div field="loginName" name="loginName" width="120">登录名
						</div>
						<div field="userName" name="userName" width="120">用户名称
						</div>
						<div field="status" name="status" width="120" renderer="statusRender">是否可用
						</div>
					</div>
			</div>
		<!-- 添加功能窗口 -->
		<div id="addWin" class="mini-window" title="添加用户" iconCls="icon-add" style="width:600px;height:300px;overflow:hidden;" 
   			showMaxButton="false" showToolbar="false" showFooter="true" showModal="true" 
   			 allowResize="false" allowDrag="true"  >
   			 <table class="input-table" id="addForm" action="<%=contextPath %>/action/system/user/add"  >
   			 	<tr>
   			 		<td width=80 ><label>登录名：</label></td>
   			 		<td><input name="loginName" class="mini-textbox" onvalidation="onEnglishAndNumberValidation" maxLength="20" style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 		<td><label>用户名称：</label></td>
   			 		<td><input name="userName"  class="mini-textbox" maxLength="25" style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 	</tr>
   			 	<tr>
   			 		<td><label>密码：</label></td>
   			 		<td><input name="password" class="mini-password" vtype="minLength:6" maxLength="20" minLengthErrorText="密码不能少于6个字符"
   			 		style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 		<td><label>确认密码：</label></td>
   			 		<td><input name="newPwd" class="mini-password" vtype="minLength:6" maxLength="20" minLengthErrorText="密码不能少于6个字符"
   			 		 onvalidation="onEnglishAndNumberValidation" style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 	</tr>
   			 	<tr>
   			 		<td><label>是否可用：</label></td>
   			 		<td>
   			 			<input name="status" class="mini-combobox" style="width:100%;" textField="name" valueField="id" data='[{id:"1",name:"是"},{id:"0",name:"否"}]' />
   			 		</td>
   			 	</tr>
   			 	<tr>
   			 		<td colspan="4" >
   			 			<div align="left" style="padding-left:20px" >配置角色：</div>
   			 			<div style="padding:0px 0px 20px 20px;">
			   			 	<table>
			   			 		<tr>
			   			 			<td>
			   			 				<div id="addRoleList1" class="mini-listbox" style="width:200px;height:150px;"
						                    textField="roleName" valueField="id" showCheckBox="true" multiSelect="true"
						                    url="<%=contextPath %>/action/system/role/query">
						                </div>
			   			 			</td>
			   			 			<td style="width:120px;text-align:center;">
						                <input type="button" value=">" onclick="addRole(0)" style="width:40px;"/><br />
						                <input type="button" value=">>" onclick="addAllRole(0)" style="width:40px;"/><br />
						                <input type="button" value="&lt;&lt;" onclick="removeAllRole(0)" style="width:40px;"/><br />
						                <input type="button" value="&lt;" onclick="removeRole(0)" style="width:40px;"/><br />
						            </td>
						            <td>
						                <div id="addRoleList2" class="mini-listbox" style="width:200px;height:150px;"
						                    name="roles" textField="roleName" valueField="id" showCheckBox="true" multiSelect="true">
						                </div>
						            </td>
			   			 		</tr>
			   			 	</table>
		   			 	</div>
   			 		</td>
   			 	</tr>
   			 </table>
   			 <div property="footer" align="center" >
		        <a class="mini-button" iconCls="icon-save" onclick="saveAddData" >保存</a>
		        <a class="mini-button" iconCls="icon-close" onclick="closeAddWin" >关闭</a>
		    </div>
		</div>
		<!-- 修改功能窗口 -->
		<div id="editWin" class="mini-window" title="修改用户" iconCls="icon-add" style="width:600px;height:400px;overflow:hidden;" 
   			showMaxButton="false" showToolbar="false" showFooter="true" showModal="true" 
   			 allowResize="false" allowDrag="true" >
   			 <table class="input-table" id="editForm" action="<%=contextPath %>/action/system/user/modify" >
   			 	<tr>
   			 		<td width=80 ><label>登录名：</label><input class="mini-hidden" name="id"  /></td>
   			 		<td><input name="loginName" class="mini-textbox" onvalidation="onEnglishAndNumberValidation" maxLength="20" style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 		<td><label>用户名称：</label></td>
   			 		<td><input name="userName"  class="mini-textbox" maxLength="25" style="width:100%" emptyText="必填" requiredErrorText="不能为空" required /></td>
   			 	</tr>
   			 	<tr>
   			 		<td><label>是否可用：</label></td>
   			 		<td>
   			 			<input name="status" class="mini-combobox" style="width:100%;" textField="name" valueField="id" data='[{id:"1",name:"是"},{id:"0",name:"否"}]' />
   			 		</td>
   			 	</tr>
   			 	<tr>
   			 		<td colspan="4" >
   			 			<div align="left" style="padding-left:20px" >配置角色：</div>
   			 			<div style="padding:0px 0px 20px 20px;">
			   			 	<table>
			   			 		<tr>
			   			 			<td>
			   			 				<div id="editRoleList1" class="mini-listbox" style="width:200px;height:150px;"
						                    textField="roleName" valueField="id" showCheckBox="true" multiSelect="true"
						                    url="<%=contextPath %>/action/system/role/query">
						                </div>
			   			 			</td>
			   			 			<td style="width:120px;text-align:center;">
						                <input type="button" value=">" onclick="addRole(1)" style="width:40px;"/><br />
						                <input type="button" value=">>" onclick="addAllRole(1)" style="width:40px;"/><br />
						                <input type="button" value="&lt;&lt;" onclick="removeAllRole(1)" style="width:40px;"/><br />
						                <input type="button" value="&lt;" onclick="removeRole(1)" style="width:40px;"/><br />
						            </td>
						            <td>
						                <div id="editRoleList2" class="mini-listbox" style="width:200px;height:150px;"
						                    name="roles" textField="roleName" valueField="id" showCheckBox="true" multiSelect="true">
						                </div>
						            </td>
			   			 		</tr>
			   			 	</table>
		   			 	</div>
   			 		</td>
   			 	</tr>
   			 </table>
   			 <div property="footer" align="center" >
		        <a class="mini-button" iconCls="icon-save" onclick="saveEditData" >保存</a>
		        <a class="mini-button" iconCls="icon-close" onclick="closeEditWin" >关闭</a>
		    </div>
		</div>
	</body>
</html>
